<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>旋转盒子</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/caterpillar.css">
</head>
<body>
<!-- ie过低提示升级 -->
<!--[if lt IE 10]>
<style>
    .upgrade {
        text-align: center;
        line-height: 40px;
        position: fixed;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 9999;
    }

    .upgrade h2 {
        margin: 100px 0 50px 0;
    }
</style>
<div class="upgrade">
    <h2>你的浏览器版本有点低，看不到T_T，请升级浏览器再浏览吧^_^Y！</h2>
    <h3>
        <p>360浏览器下载：<a target="_blank" href="http://se.360.cn/">http://se.360.cn/</a></p>
        <p>谷歌浏览器下载：<a target="_blank" href="https://www.google.cn/chrome/">https://www.google.cn/chrome/</a></p>
        <p>IE浏览器下载：<a target="_blank" href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads">https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads</a>
        </p>
    </h3>
</div>
<![endif]-->
<style>
.wrap {
	width: 120px;
	height: 200px;
	margin: 20px;
	position: fixed;
	border: 1px dashed #f00;
	top: 15px;
	right: 15px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	z-index: 22;
}

.cube {
	width: 120px;
	height: 120px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	animation: rotate linear 20s infinite;
}

@-webkit-keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}


.cube div {
	position: absolute;
	width: 120px;
	height: 120px;
	opacity: 0.8;
	transition: all .4s;
}

.cube .out_front {
	transform: rotateY(0deg) translateZ(60px);
}

.cube .out_back {
	transform: translateZ(-60px) rotateY(180deg);
}

.cube .out_left {
	transform: rotateY(-90deg) translateZ(60px);
}

.cube .out_right {
	transform: rotateY(90deg) translateZ(60px);
}

.cube .out_top {
	transform: rotateX(90deg) translateZ(60px);
}

.cube .out_bottom {
	transform: rotateX(-90deg) translateZ(60px);
}

.pic {
	width: 100px;
	height: 100px;
}

</style>
<div class="wrap">
	<div class="cube">
		<div class="out_front"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="pic"></div>
		<div class="out_back"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="pic"></div>
		<div class="out_left"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="pic"></div>
		<div class="out_right"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="pic"></div>
		<div class="out_top"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="pic"></div>
		<div class="out_bottom"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="pic"></div>
	</div>
</div>
</body>
</html>